<template>
	<div class="body-content">
		<div class="phot-active-device">
			<div class="phot-active-device-toolbar">
				<div class="toolbar-content">
					<pui-toolbar :toolbarList="hooksData.activeDeviceToolbar[deviceType]"></pui-toolbar>
				</div>
			</div>
			<div class="phot-active-device-main">
				<!-- <QuantumWellDevice ref="QuantumWellDeviceRef" v-show="deviceType === 'semiconductor'"></QuantumWellDevice> -->
				<ElectroOpticDevice ref="ElectroOpticDeviceRef" v-show="deviceType === 'electroOptical'"></ElectroOpticDevice>
				<FiberDevice ref="FiberDeviceRef" v-show="deviceType === 'opticalFiber'"></FiberDevice>
			</div>
		</div>
		<NewActiveDeviceDialog ref="NewActiveDeviceDialogRef" @openFolderBrowser="openFolderBrowser" :directoryPath="mainRef.directoryPath" @onClose="mainRef.directoryPath = ''" @sendActiveDeviceData="getActiveDeviceData"  />
		<FolderBrowserDialog ref="FolderBrowserDialogRef" @onSubmit="onFolderSubmit" :root="mainRef.directoryPath"/>
		<MaterialLibraryDialog ref="MaterialLibraryDialogRef" />
		<MaterialCustomDialog ref="MaterialCustomDialogRef" />
		<QuantumWellDialog ref="QuantumWellDialogRef" />
		<InputSignalDialog ref="InputSignalDialogRef" />
		<OpticalParameterDialog ref="OpticalParameterDialogRef" />
		<TaskManagementDialog ref="TaskManagementDialogRef"/>
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'OptiActiveDeviceContent'
})
</script>
<script lang="ts" setup>
import useHooks from '@/hooks'
import mainData from './index'
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from 'vue'
import { deviceManager } from '@/services/phot_client/device'
import NewActiveDeviceDialog from './NewActiveDevice.vue'
import FolderBrowserDialog from '../fileControl/folderBrowser.vue'
import MaterialLibraryDialog from './MaterialLibrary.vue'
import MaterialCustomDialog from './MaterialCustom.vue'
import QuantumWellDialog from './QuantumWell.vue'
import InputSignalDialog from './InputSignal.vue'
import OpticalParameterDialog from './OpticalParameter.vue'
import TaskManagementDialog from '@/components/common/TaskManagement.vue'
import QuantumWellDevice from './quantum_well_device/quantum_well_device.vue'
import ElectroOpticDevice from './electro_optic_device/electro_optic_device.vue'
import FiberDevice from './fiber_device/fiber_device.vue'
import { useStore } from 'vuex';
import upath from 'upath'
const store = useStore()
const { proxy } = getCurrentInstance() as any
const deviceType = ref('default')
const modelType = ref('')
const {
	hooksData,
} = useHooks()
const mainRef = reactive(mainData.mainRef)
const openFolderBrowser = async (e?: any) => {
    mainRef.directoryPath = './'
    await nextTick()
    proxy.$refs.FolderBrowserDialogRef.init(e)
}
const onFolderSubmit = async (e: any) => {
	getActiveDeviceData(e)
}

// const treeData = {
// 				label:gridName,
// 				value: gridId,
// 				id: gridId,
// 				children: []
// 			}
// 			mainRef.gridList.push({
// 				name: gridName || '仿真网络',
// 				id: gridId,
// 				grid,
// 				index: mainRef.gridList.length
// 			})
// 			mainRef.nowGridId = gridId
// 			// proxy.$refs.CompoHistoryRef.addHistory(treeData, '1')
// 			mainRef.gridHistoryList.set(gridId, treeData)
// 			proxy.$refs.CompoHistoryRef.init(mainRef.gridHistoryList)
//             proxy.$loading.close()
onMounted(() => {
	proxy.$refs.ElectroOpticDeviceRef.init()
})
const getActiveDeviceData = async (e: any) => {
	deviceType.value = e.deviceType
	modelType.value = e.modelType
	if (e.deviceType === 'opticalFiber') proxy.$refs.FiberDeviceRef.init(e.modelType)
	if (e.deviceType === 'electroOptical') proxy.$refs.ElectroOpticDeviceRef.init(e.modelType)
}
const removeTab = async (e: any) => {
	console.log(e)
	// await deviceManager.saveGrid(e.id)
	await deviceManager.closeGrid(e.id)
	mainRef.gridHistoryList.delete(e.id)
	if (mainRef.gridList.length > 0) {
		console.log(1)
		let nowIdx = e.index
		console.log(mainRef.gridList.length === nowIdx ? nowIdx - 1 : nowIdx)
		mainRef.nowGridId = mainRef.gridList[mainRef.gridList.length === nowIdx ? nowIdx - 1 : nowIdx].id
		await deviceManager.switchGrid(mainRef.nowGridId)
		console.log(2)
	} else {
		mainRef.nowGridId = ''
	}
	proxy.$refs.StructureDirectoryRef.init()
	proxy.$refs.CompoHistoryRef.init(mainRef.gridHistoryList)
}
const addTab = async (e: any) => {
	proxy.$refs.NewGridDialogRef.init()
}
const tabClickHandle = async (e: any) => {
	console.log(__dirname)
	await deviceManager.switchGrid(e.id)
	mainRef.nowGridId = e.id
	proxy.$refs.CompoHistoryRef.init(mainRef.gridHistoryList)
	proxy.$refs.StructureDirectoryRef.init()
}
</script>